import React, { Component } from 'react'

export default class App extends Component {

    state = {
        src: ''
    }


    /*
        文件上传：
            1. 将图片转换成 base64 直接上传(不推荐使用，转换成 base64 数据量非常大，会导致服务器被大量占用)

            2. 直接将文件传到一个专门存储文件的服务器中，然后该服务器会给你返回一个图片的 url 地址
                有了 url 地址后，将该地址传递给自己的服务器做保存
    */ 


    getFile = (e)=>{
        // console.log(URL.createObjectURL(e.target.files[0]));

        // 1、URL.createObjectURL 根据文件生成一个临时路径
        // 通过用户选择的文件创建一个 url 地址，然后将其显示出来
        // this.setState({
        //     src: URL.createObjectURL(e.target.files[0])
        // })

        // 2、将图片转换成 base64 的方式进行传递
        // 文件加载器
        const reader = new FileReader()

        // 通过文件加载器来读取选择的文件
        reader.readAsDataURL(e.target.files[0])

        // 文件读取成功之后的回调函数
        reader.onload = ()=>{
            // console.log(reader.result);
            // 将图片读取成 base64 格式后赋值给 src 进行使用
            this.setState({
                src: reader.result
            })
        }

    }



  render() {
    return (
      <div>
        <input type="file" onChange={this.getFile} />
        {/* 展示读取成功之后的 base64 */}
        <img style={{width: 200}} src={this.state.src} alt="" />
      </div>
    )
  }
}
